<template>
  <div>
    <n-data-table :columns="columns" :data="collections"/>
  </div>
</template>

<script>
import {listCollection} from "@api/collection";
import {Search as SearchIcon} from "@vicons/ionicons5";
import {RouterLink} from "vue-router";
import {NIcon, NButton} from "naive-ui";
import {deleteCollection} from "@api/collection";
import {useSystemStore} from "@store/system";
const system = useSystemStore();
export default {
  name: "CollectionList",
  components: {SearchIcon, RouterLink, NIcon},
  data() {
    return {
      collections: [],
      columns: [
        {
          title: "命名空间",
          key: "namespace",
        },
        {
          title: "集合名称",
          key: "collectionName",
        },
        {
          title: "保留信息",
          key: "storageFaceInfo",
          render: (row) => {
            return row.storageFaceInfo ? "是" : "否";
          }
        },
        {
          title: "存储组件",
          key: "storageEngine",
        },
        {
          title: "集合描述",
          key: "collectionComment",
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (row) => {
            console.log(row);
            return h('div', [
              h(NButton, {
                text: true,
                style: {
                  marginLeft: "5px",
                },
                type: "primary",
                onClick: () => {
                  system.setCollection(row.collectionName);
                  $router.push({
                    name: "sample-list",
                  });
                },
              }, "样本"),
              h(NButton, {
                text: true,
                style: {
                  marginLeft: "5px",
                },
                type: "error",
                onClick: () => {
                  deleteCollection(row.namespace, row.collectionName).then((res) => {
                    this.load();
                  });
                },
              }, "删除"),
            ]);
          }
        }
      ],
    };
  },
  methods: {
    load() {
      listCollection().then((res) => {
        this.collections = res.data.data;
      });
    }
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>

</style>
